
import { udp, useHistory } from "@cscec/udp-mobile-ui";
import { FloatButton } from "antd";
import "./index.less";
import { useLocation } from "@umijs/max";
import HomeOutlined from "@ant-design/icons/lib/icons/HomeOutlined";
import UserOutline from "antd-mobile-icons/es/UserOutline";
import { useAudioPlay } from "@/hooks/useAudioPlay";

export const FootToolbar = () => {
  const location = useLocation()
  const { pathname } = location
  const { isPlaying, isLoading, playAudio, stopAudio } = useAudioPlay({});

  return (
    <div className="tab-bar-wrapper"
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: 1000,
        background: '#f5f7fb',
        height: '60px',
      }}
    >
      <FloatButton
        className={pathname === "/BellaEnglish" ? "activeButton" : ""}
        shape="circle"
        // description="Home"
        icon={<HomeOutlined style={pathname === "/BellaEnglish" ? { color: '#1EB7D8' } : { color: "rgba(0, 0, 0, 0.88)" }} />}
        style={{
          bottom: '10px',
          left: '80px'
        }}
        onClick={() => {
          stopAudio()//所有跳转时，停止朗读,优化体验
          udp.open("/BellaEnglish")
        }}
      />
      <FloatButton
        className={pathname === "/Personal" ? "activeButton" : ""}
        shape="circle"
        // description="Profile"
        icon={<UserOutline style={pathname === "/Personal" ? { color: '#1EB7D8' } : { color: "rgba(0, 0, 0, 0.88)" }} />}
        style={{
          bottom: '10px',
          right: '80px',
        }}
        onClick={() => {
          stopAudio()//所有跳转时，停止朗读,优化体验
          udp.open("/Personal")
        }}
      />
    </div >
  );
};